<template>
  <div>
    <el-table :data="newTableData" style="width: 100%"  :highlight-current-row="true" :stripe="true" size="mini">
      <template v-for="item in tableHeader">
        <el-table-column
          v-if="item.prop !== '' && item.prop !== 'Memo'"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <el-table-column
          v-if="item.prop === 'Memo'"
          :prop="item.prop"
          :label="item.label">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.Memo" placement="top">
              <div class="memo_box" style="white-space: nowrap;">{{scope.row.Memo}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.prop === ''"
          :label="item.label">
          <template scope="scope">
            <el-button type="text" @click="editBlackRedList(scope.row)" size="small">{{$t('public.edit')}}</el-button>
            <el-button type="text" @click="del(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
          </template>
      </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'BlackRedTable',
    data () {
      return {
        currentDeleteData: {}
      }
    },
    props: {
      tableData: Array,
      tableHeader: Array
    },
    computed: {
      newTableData () {
        return this.tableData || []
      }
    },
    methods: {
      editBlackRedList (val) {
        this.$emit('editBlackRedList', val)
      },
      del (val) {
        this.$confirm(this.$t('channelsettings.redBlack3'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.currentDeleteData = val
          this.deleteBlackList()
        }).catch(() => {
          console.log('取消')
        })
      },
      deleteBlackList () {
        let data = {}
        if (this.currentDeleteData) {
          data._id = this.currentDeleteData._id
        }
        data.Account = this.$store.state.session.account.account
        data.BlackNum = this.currentDeleteData.BlackNum || ''
        data.PBX = this.currentDeleteData.PBX || ''
        data.Type = this.currentDeleteData.Type || ''
        data.Memo = this.currentDeleteData.Memo || ''
        this.$store.dispatch('delBlackNum', data).then(resp => {
          if (resp.success) {
            this.$emit('resh', 'isNeedPbx')
            this.$emit('reload', false)
            this.$message.success(this.$t('sms.successDel'))
          } else {
            this.$emit('reload', true)
            this.$message.error(this.$t('sms.failDel'))
          }
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .updata
    cursor pointer
  .el-table .cell >.el-button--text.del
    color $c-pink
    cursor pointer
  .download
    margin-right 10px
  .memo_box 
    white-space nowrap
    display inline-block
    max-width 100%
    text-overflow ellipsis
    overflow hidden
</style>
